<script>
export default {
  name: "global-card",
  components: {},
  data() {
    return {
      activeId_: '',
      listData: [{
        name: '年',
        id: 'year'
      }, {
        name: '月',
        id: 'month'
      }, {
        name: '周',
        id: 'week'
      }],
      switchIsActive: false
    }
  },
  props: {
    showReset: {
      default: false
    },
    showClose: {
      default: false
    },
    listData: {
      required: false,
      default: []
    },
    activeId: {
      required: false,
      default: ''
    },
    showSelect: {
      default: false
    },
    mainTitle: {
      default: '',
      required: true
    },
    position: {
      default: 'left',
      required: false,
    },
    showSwitch: {
      required: false,
      default: false
    },
    switchName: {
      required: false,
      default: ''
    }
  },
  computed: {
  },
  watch: {
  },
  mounted() {
    this.activeId_ = this.activeId;
  },
  beforeUnmount() {
  },
  methods: {
    setSelect(v) {
      this.activeId_ = v.id;
      this.$emit('change', v.id)
    },
    close() {
      this.$emit('close')
    },
    setSwitch() {
      if(this.switchIsActive) {
        this.switchIsActive = false;
      } else {
        this.switchIsActive = true;
      }
      this.$emit('switch-change', this.switchIsActive)
    },
    doReset() {
      this.$emit('reset')
    },
    doView() {
      this.$emit('view')
    }
  },
};
</script>

<template>
  <div class="global-card" :class="[
    position
  ]">
    <div class="header">
      <div class="main-title font-YouSheBiaoTiHei">
        <span>{{ mainTitle }}</span>
      </div>
      <!-- close -->
      <slot name="right">
        <!-- <div class="close-area" v-if="showClose" @click="close"></div> -->
        <div class="funciton-area" v-if="showSelect">
          <div class="inner font-alimamashuheiti" v-for="(item, index) in listData" :key="index" @click="setSelect(item)" :class="[
            activeId_ === item.id ? 'active' : ''
          ]">{{ item.name }}</div>
        </div>
        <div class="funciton-area" v-if="showSwitch">
          <div class="inner font-alimamashuheiti" @click="setSwitch()" :class="[
            switchIsActive ? 'active' : ''
          ]">{{ switchName }}</div>
        </div>
        <div class="funciton-area cursor-pointer" v-if="showReset || showView">
          <el-icon @click="doView" style="margin-right: .5rem;">
            <View />
          </el-icon>
          <el-icon @click="doReset">
            <Refresh />
          </el-icon>
        </div>
      </slot>
    </div>
    <div class="body">
      <slot name="body"></slot>
    </div>
  </div>
</template>
<style lang="less" scoped>
@gapwidth: 5.8rem;

.global-card {
  pointer-events: all;
  position: absolute;
  border-radius: .5rem;
  //background-image: linear-gradient(to right, rgba(4, 30, 60, 1), rgba(4, 30, 60, .2));
  background-image: linear-gradient(to right, rgba(4, 30, 60, .9), rgba(4, 30, 60, .8));
  color: #ECF5FD;
  width: 42rem !important;

  &.right {
    margin-top: 1.5rem;
  }

  &>.header {
    height: 3.5rem;
    background-image: url(./images/main-header.svg);
    background-size: cover;
    display: flex;
    font-size: 1.4rem;
    justify-content: space-between;
    align-items: center;

    &>.main-title {
      height: 100%;
      font-size: 2rem;
      display: inline-flex;
      align-items: center;
      padding-left: 4rem;
    }

    &>.close-area {
      margin-right: 1rem;
      width: 1.5rem;
      height: 1.5rem;
      background-image: url(./images/close.svg);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
    }

    &>.funciton-area {
      margin-right: .5rem;
      border: 1px solid rgb(34, 48, 124);
      background-color: #133B7C;
      display: flex;
      font-size: 1.4rem;
      transform: translateY(.5rem);

      &>.inner {
        padding: .35rem .5rem;
        letter-spacing: 2px;
        cursor: pointer;

        &.active,
        &:hover {
          background-image: linear-gradient(45deg, #0062BC 18%, #36B0FF 115%);
        }
      }

    }
  }

  &>.body {
    position: relative;
    font-size: 2rem;
    padding: .5rem;
    &::before {
      position: absolute;
      content: " ";
      z-index: -1;
      width: 100%;
      height: 100%;
    }
  }
}
</style>